<%--
  Created by IntelliJ IDEA.
  User: 96394
  Date: 2019/12/23
  Time: 16:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@taglib prefix="mvc" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="fmt" uri="http://www.springframework.org/tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>任务报表</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/lib/pagination/style/pagination.css">
    <link rel="stylesheet" type="text/css" href="/css/base.css"/>
    <link rel="stylesheet" type="text/css" href="/css/base/base.css?20201106.1"/>
    <link rel="stylesheet" type="text/css" href="/css/news/center.css"/>
    <link rel="stylesheet" href="/lib/bootstrap/3.3.7/css/bootstrap.css">
    <script type="text/javascript" src="/js/news/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="/js/base/tablePage.js"></script>
    <script src="/js/news/page.js"></script>
    <script src="/js/base/base.js" type="text/javascript" charset="utf-8"></script>
    <script src="/lib/layer/layer.js?20201106"></script>
    <script src="/js/task/laydate/laydate.js"></script>
    <script src="/lib/bootstrap/3.3.7/js/bootstrap.js"></script>
    <script src="/lib/bootstrap/3.3.7/js/bootstrap-treeview.js" type="text/javascript" charset="utf-8"></script>

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="/lib/bootstrap/3.3.7/js/html5shiv.min.js"></script>
    <script src="/lib/bootstrap/3.3.7/js/respond.min.js"></script>
    <![endif]-->

    <style>
        * {
            font-family: "Microsoft Yahei";
        }

        body {
            user-select: none;
        }

        .header {
            margin-top: 15px;
            height: 40px;
        }

        .header .title {
            margin-left: 22px;
        }

        .sales {
            float: none;
            /*margin-top: 9px;*/
            font-size: 22px;
            color: #333;
            display: inline-block;
            margin-left: 10px;
            vertical-align: middle;
            margin-top: -6px;
        }

        .addSign {
            padding: 5px 20px;
            color: #000000;
            cursor: pointer;
            float: left;
        }

        .navRight {
            display: none
        }

        .clearfix {
            border: 1px solid #4889f0;
            border-radius: 5px;
        }

        .navRight ul li.active {
            color: #fff;
            background: #4889f0;
        }

        .content_label {
            line-height: 28px;
            font-size: 15px;
            color: rgb(111, 111, 111);
        }

        .content_label ul {
            margin: 15px 0;
        }

        .search_box {
            margin-left: 30px;
            padding-top: 15px;
        }

        .search_box .search_content {
            min-height: 28px;
            margin: 5px 0;
            line-height: 28px;
            font-size: 15px;
            color: #6f6f6f;
        }

        .search_content .search_item {
            display: inline-block;
            margin-right: 20px;
            padding-left: 0;
        }

        .search_content .search_item label {
            float: left;
            margin-right: 10px;
        }

        .search_input {
            position: relative;
            float: left;
            border-bottom: 1px solid #ccc;
        }

        .search_input input[type=text] {
            border: none;
            font-size: 12px;
            padding-left: 10px;
            width: 100%;
        }

        .search_input .user_icon {
            position: absolute;
            top: 6px;
            right: 0;
            color: #999;
            cursor: pointer;
        }

        .search_input .user_icon:hover {
            color: #3da8f5;
        }

        .search_checkbox {
            float: left;
            margin: 0;
        }

        .M-box3 a {
            text-decoration: none;
        }

        .clearf {
            zoom: 1;
        }

        .clearf:after {
            content: " ";
            height: 0;
            line-height: 0;
            display: block;
            overflow: hidden;
            visibility: hidden;
            clear: both;
        }

        .pagination-box {
            text-align: center;
        }

        .pagination-box a {
            cursor: pointer;
        }

        .pagination-box .disable > a {
            background-color: #bdbdbd !important;
            color: #696969 !important;
            cursor: default;
        }

        .total-box {
            position: relative;
            display: inline-block;
            margin: 20px 0;
            vertical-align: top;
            padding: 3px 12px;
            line-height: 1.42857143;
            color: #000;
            background-color: #fff;
        }

        .total-box > span {
            margin-right: 10px;
        }

        .total-box > input {
            width: 35px;
            padding: 0 2px;
            text-align: center;
            background-color: #ccc;
            border-radius: 5px;
        }

        .total-box .btnpage {
            margin-left: 5px;
            padding: 0 3px;
            border-radius: 5px;
            background: #ffa500;
            color: #231d1d;
        }

    </style>

    <link rel="stylesheet" type="text/css" href="/css/commonTheme/${sessionScope.InterfaceModel}/commonTheme.css"/>
</head>

<body>

<div class="search_box" style="margin-bottom: 20px">
    <div class="search_module">
        <div class="search_content">
            <%--            <div class="search_item clearf">--%>
            <%--                <label for="search_user">用户:</label>--%>
            <%--                <div class="search_input">--%>
            <%--                    <input type="text" id="search_user" placeholder="搜索用户" />--%>
            <%--                    <span class="glyphicon glyphicon-user user_icon"></span>--%>
            <%--                </div>--%>
            <%--            </div>--%>
            <div class="search_item clearf">
                <label>部门:</label>
                <div class="search_input" style="width: 200px;">
                    <input type="text" readonly id="search_dept" style="cursor: pointer;" placeholder="选择部门" />
<%--                    <span class="glyphicon glyphicon-user user_icon"></span>--%>
                </div>
            </div>
            <div class="search_item clearf">
                <label>统计对象:</label>
                <div class="checkbox search_checkbox">
                    <label>
                        <input type="radio" name="user" value="1">负责人
                    </label>
                    <label>
                        <input type="radio" name="user" value="2">参与人
                    </label>
                    <label>
                        <input type="radio" name="user" value="3">共享人
                    </label>
                </div>
            </div>
        </div>
        <div class="search_content row">
            <div class="search_item clearf col-sm-4">
                <label>起始时间:</label>
                <div class="input-group date_input" style="width: 232px;">
                    <input name="begindate" class="form-control" id="begindate" placeholder="起始日" type="text"
                           readonly="readonly"/>
                    <span class="input-group-addon btn_add_task" style="background: #dcdcdc">
                            <span class="glyphicon glyphicon-time icon-add-task"></span>
                        </span>
                </div>
            </div>
            <div class="search_item clearf col-sm-4">
                <label>结束时间:</label>
                <div class="input-group date_input" style="width: 232px;">
                    <input name="enddate" class="form-control" id="enddate" placeholder="到期日" type="text"
                           readonly="readonly"/>
                    <span class="input-group-addon btn_add_task" style="background: #dcdcdc">
                            <span class="glyphicon glyphicon-time icon-add-task"></span>
                        </span>
                </div>
            </div>
            <button type="button" class="btn btn-primary btn_search">搜索</button>
            <a href="javascript:;" class="btn btn-primary btn_export" style="margin-left: 20px;">导出</a>
        </div>
    </div>
</div>
<div id="pagediv" style="padding: 5px 30px;">
    <div class="data_content">
        <table class="table">
            <thead>
            <tr>
                <th>人员</th>
                <th>部门</th>
                <th>任务数</th>
                <th>进行中</th>
                <th>已延期</th>
                <th>已完成</th>
                <th>完成率</th>
            </tr>
            </thead>
            <tbody id="report_table">

            </tbody>
        </table>
        <nav class="pagination-box" id="pagination">

        </nav>
    </div>
    <div class="no_data" style="text-align: center;display: none;">
        <img src="/img/main_img/shouyekong.png" alt="暂无数据" style="margin-top: 50px;margin-bottom: 20px;">
        <p>暂无数据</p>
    </div>
</div>

<script src="/js/task/pagination.js"></script>
<script>
    var basePath = "<%=basePath%>";

    // 设置分页属性
    var pagination = {
        page: 1,
        pageSize: 10,
        totalCount: 0,
        onClick: function (page) {
            getReportData(page);
        }
    }

    // 选择起始时间
    laydate.render({
        elem: '#begindate',
        type: 'date',
        format: 'yyyy-MM-dd',
        range: '|',
        trigger: 'click'
    });

    // 选择结束时间
    laydate.render({
        elem: '#enddate',
        type: 'date',
        format: 'yyyy-MM-dd',
        range: '|',
        trigger: 'click'
    });
    
    // 选择部门
    $('#search_dept').on('click', function(){
        dept_id = 'search_dept';
        $.popWindow('/common/selectDept?0');
    });

    // 点击导出
    $('.btn_export').on('click', function () {
        var statisObject = $("input[name='user']:checked").val();
        var deptId = ($('#search_dept').attr('deptid') || '').replace(/,$/, '');
        var data = {
            // page: pagination.page,
            // pageSize: pagination.pageSize,
            useFlag: false,
            temp: 1,
            userId: '',
            deptId: deptId,
            statisObject: statisObject ? statisObject : 0,
            //  startDate: $('#begindate').val(),
            // endDate: $('#enddate').val()
        }
        var queryStr = '';
        for (var i in data) {
            queryStr += (i + '=' + data[i] + '&');
        }

        window.location.href = basePath + 'task/reportTask?' + queryStr.slice(0, queryStr.length - 1);
    });

    // 点击搜索
    $('.btn_search').on('click', function () {
        getReportData(1);
    });

    // 获取报表数据
    function getReportData(page) {
        var statisObject = $("input[name='user']:checked").val();
        var deptId = ($('#search_dept').attr('deptid') || '').replace(/,$/, '');
        var data = {
            page: page,
            pageSize: pagination.pageSize,
            useFlag: true,
            temp: 0,
            userId: '',
            deptId: deptId,
            statisObject: statisObject ? statisObject : 0,
            startDate: $('#begindate').val(),
            endDate: $('#enddate').val()
        }
        $.ajax({
            type: 'get',
            url: basePath + 'task/reportTask',
            dataType: 'json',
            data: data,
            success: function (res) {
                if (res.flag) {
                    var $table = $('#report_table');
                    var $pagination = $('#pagination');
                    $pagination.empty();
                    $table.empty();
                    if (res.obj.length > 0) {
                        $('.data_content').show();
                        $('.no_data').hide();
                        pagination.page = page;
                        pagination.totalCount = res.totleNum;
                        $('#pagination').pagination(pagination);

                        res.obj.forEach(function (task) {
                            var userStr = '<td>' + task.manageUser + '</td>';
                            var deptStr = '<td>' + task.deptName + '</td>';
                            var taskCount = '<td>' + task.taskCount + '</td>';
                            var processingStr = '<td>' + task.processingCount + '</td>';
                            var postponedStr = '<td>' + task.postponedCount + '</td>';
                            var completedStr = '<td>' + task.completedCount + '</td>';
                            var compleRateStr = '<td>' + task.compleRate + '</td>';
                            var $task = $('<tr>' + userStr + deptStr + taskCount + processingStr + postponedStr + completedStr + compleRateStr + '</tr>');
                            $table.append($task);
                        });
                    } else {
                        $('.data_content').hide();
                        $('.no_data').show();
                    }
                }
            }
        })
    }

    getReportData(1)

</script>
</body>
</html>
